import { ProConfigProvider, ProLayout, WaterMark, PageContainer } from '@ant-design/pro-components';
import { useOutlet, history, matchPath } from '@umijs/max';
// import { Line } from '@ant-design/charts';
// import { useRequest } from '@umijs/max';
import { theme } from 'antd';
import routes from '../../config/router';
import { findRouterItem, RoutersType } from '@/utils/findRouterItem';
import { useEffect, useState } from 'react';
import { useModel } from '@umijs/max';

const Layouts: React.FC = () => {
  const { pathname, search } = history.location;
  const curRouter = findRouterItem(pathname, routes);
  const urlParamsStr = pathname + search;
  const outlet = useOutlet();
  let curTab: RoutersType | undefined = undefined;
  const { memoHistory, setMemoHistory } = useModel("memoHistory");
  const curRouterItem = memoHistory.find(i => matchPath({ path: urlParamsStr }, i.key as any));
  const [curPath, setCurPath] = useState(urlParamsStr);
  // const keepAlive = (curRouter as any)!.mate!.keepAlive;
  const [collapsed, setCollapsed] = useState(false);
  const [settings, setSettings] = useState<any>({
    layout: 'top',
  })


  curRouter && (curTab = {
    label: curRouter.name || "",
    key: urlParamsStr,
    path: urlParamsStr,
    children: <div>{outlet}</div>
  });

  useEffect(() => {
    if (!curRouterItem && curRouter) {
      curTab && setMemoHistory([curTab]);
      curRouter.path && setCurPath((_path: any) => _path);
    } else {
      // if (keepAlive === false && curRouterItem) {
      //   curRouterItem.children = (
      //     <div key={Math.random()}>
      //       {outlet}
      //     </div>
      //   )
      // }
    }
  }, [pathname])

  const getPageTitleRender = (props: any) => {
    console.log(props)
    return "";
  }

  return (
    <ProConfigProvider hashed={false}>
      <ProLayout
        contentStyle={{ margin: 0 }}
        locale='zh-CN'
        collapsed={collapsed}
        onCollapse={e => setCollapsed(e)}
        location={{ pathname: curPath }}
        pageTitleRender={props => getPageTitleRender(props)}
        route={{ routes: (routes[1] as any).routes, location: { pathname: '/' } }}
        rightContentRender={false}
        menuProps={{
          onClick(e) {
            setCurPath(e.key);
            history.push(e.key);
          },
          selectedKeys: [curPath]
        }}
        {...settings}
      >
        <WaterMark content="microApp">
          <PageContainer ghost header={{ breadcrumb: {} }}>
            {outlet}
          </PageContainer>
        </WaterMark>
      </ProLayout>
    </ProConfigProvider>
  )
}

export default Layouts;